﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- Add a reference to the Bing Maps Control -->
    <script type="text/javascript" src="http://www.bing.com/api/maps/mapcontrol?callback=loadMap"></script>

    <script type="text/javascript">
        function loadMap() {
            var elem = document.querySelector("#map");
            Microsoft.Maps.registerModule("ConfigurationModule", "scripts/ConfigurationModule.js");
            Microsoft.Maps.loadModule("ConfigurationModule", {
                callback: function () {
                    getConfig(function (jsonConfig) {
                        var config = ConfigurationModule.getConfig(jsonConfig);
                        new Microsoft.Maps.Map(elem, config);
                    })
                }
            });
        }

        var getConfig = function (callback) {
            var request = new XMLHttpRequest();
            request.addEventListener("load", function () {
                var config = JSON.parse(this.responseText);
                callback(config);
            });
            request.open("GET", "configuration.json");
            request.send();
        };
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>